<template>
<!--  背景不随缩放变化-->
  <div class="login">
    <div class="outBorder">
      <div class="card">
      <h3 class="title2">用户登录</h3>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm">
      <el-form-item prop="adminName" label="账号" class="whiteItem">
        <el-input v-model="ruleForm.adminName" style="width: 340px;height: 20px" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item prop="adminPasswd" style="height: 20px;" label="密码" class="whiteItem">
        <el-input v-model="ruleForm.adminPasswd" show-password style="width: 340px;" placeholder="请输入密码"></el-input>
      </el-form-item>
      <!--      <div style="border: 1px solid red;height: 30px;width: 340px;margin-left: 20px">-->
      <el-form-item prop="serverValue" style="height: 15px;" >
        <el-checkbox style="float: left;color: #fff" v-model="ruleForm.rememberPassword">记住密码</el-checkbox>
        <!--        <el-button type="text" style="float: right">立即注册</el-button>-->
        <el-select v-model="ruleForm.serverValue" placeholder="请选择服务器" style="margin-left: 10px;margin-bottom: 10px;width: 250px" @change="serverChange(ruleForm.serverValue)">
          <el-option
              v-for="item in serverList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!--      </div>-->
      <el-form-item>
        <!--        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>-->
        <el-button @click="resetForm('ruleForm')" style="width: 165px;margin-top: 10px">重置</el-button>
<!--        <el-button type="primary" @click="skipLogin('ruleForm')" style="width: 165px">登录</el-button>-->
        <el-button type="primary" @click="Login('ruleForm')" style="width: 165px">登录</el-button>
        <!--        <el-button @click="showReg=!showReg">注册</el-button>-->
      </el-form-item>
    </el-form></div>
    </div>
    <!--  底部  -->
    <div class="el-login-footer">
      <span style="margin-right: 300px">Copyright © 2023</span><span>All Rights Reserved.</span>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
import ip from "../components/ip.js";
import {serverSelectionMixin} from "@/components/mixin";
export default {
  name: "login",
  data() {
    return {
      codeUrl: "",
      ruleForm: {
        adminName: '',
        adminPasswd: '',
        serverValue:'',
        rememberPassword:''
      },
      rules: {
        adminName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 0, max: 10, message: '长度不高于10个字符', trigger: 'blur' }
        ],
        adminPasswd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 0, max: 20, message: '长度不高于20个字符', trigger: 'blur' }
        ],
        serverValue: [
          { required: true, message: '请选择服务器', trigger: 'change' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      loading: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: false,
      redirect: undefined,
      // serverValue:'',
      serverList:[]
    };
  },
  mixins:[serverSelectionMixin],
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  mounted() {
    this.serverData()
    console.log('?',this.serverList)
  },
  methods: {
    // ...mapMutations(['storeToken']),
    // TODO 2：登录时需要进行数据库更新，更新该账号的最新登陆时间
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        //TODO 账号密码验证 token
        // axios.post('http://localhost:8085/admin/login',this.ruleForm).then(res=>{
          axios.post(ip+'/admin/login',this.ruleForm).then(res=>{
          if (res.data===true){
            // alert("欢迎！"+this.ruleForm.adminName)
            this.$message({
              message: `欢迎！"+${this.ruleForm.adminName}`,
              type: 'success'
            });
            this.$refs[formName].resetFields();
            this.$router.push('/baseInfo')
          }
          else if (res.data==='此用户名不存在'){
            this.$message({
              message: '此用户名不存在',
              type: 'warning'
            });
            this.$refs[formName].resetFields();
          }
          else {
            this.$message.error("密码错误")
            this.ruleForm.adminPasswd=''
          }
        })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    Reg(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // axios.post('http://localhost:8085/admin/login',this.ruleForm).then(res=>{
          axios.post(ip+'/admin/reg',this.ruleForm).then(res=>{
            if (res.data==='注册成功'){
              this.$message({
                message: '注册成功',
                type: 'success'
              });
              this.$refs[formName].resetFields();
              this.showReg=!this.showReg
            }
            else if (res.data==='用户名重复！请重新输入'){
              this.$message({
                message: '用户名重复！请重新输入',
                type: 'warning'
              });
              this.$refs[formName].resetFields();
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    Login(formName) {
      if (this.ruleForm.serverValue ==='') {
        this.$message({
          message: '请选择服务器',
          type: 'warning'
        });
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let loginForm = {
            user_name : this.ruleForm.adminName,
            user_password : this.ruleForm.adminPasswd
          }
          axios.post(this.$ip2 + '/user/login/', loginForm).then(res=>{
            if (res.data !== '用户名或密码错误') {
              // 存token入vuex
              this.$store.commit("storeToken",{token : 'Bearer ' + res.data})
              // this.storeToken({token : 'Bearer' + res.data})
              // this.$store.state.token = 'Bearer' + res.data
              this.$message({
                message: '登录成功！',
                type: 'success'
              });
              this.$router.push('/serverInfo')
            }
            else {
              this.$message({
                message: '用户名或密码错误！',
                type: 'error'
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    skipLogin(formName) {
      if (this.ruleForm.serverValue ==='') {
        this.$message({
          message: '请选择服务器',
          type: 'warning'
        });
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push('/serverInfo')
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.login {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("../assets/UI7.png");
  background-size: cover;
  //background-repeat: no-repeat;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 18px;
  letter-spacing: 1px;
}
.outBorder{
  height: 400px;
  width: 1200px;
  margin-top: 150px;
  //display: flex;
  //justify-content: center;
  //align-items: center;
}
.login-code-img {
  height: 38px;
}
.card{
  width: 400px;
  //position: absolute;
  //left: 1200px;
  //top: 33%;
  float: right;
  /*left: 0;*/
  /*top: 0;*/
  color: #0ba3c2;
  height: 280px;
  /*max-width: 100%;*/
  /*padding: 60px 35px 0;*/
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #4dcdfd;
  background-color: #194b85;
}
.title2 {
  font-size: 26px;
  height: 80px;
  line-height: 80px;
  /*margin: 0px -10px 10px 10px;*/
  text-align: center;
  font-weight: bold;
}
</style>
